<!DOCTYPE html>
<html>

<head>
    <title>按钮显示和隐藏标签</title>
    <script type="text/javascript"
        src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1-edb203c114.10.2.js"></script>
    <script>
        // 多种写法

        $(document).ready(function(){
            $('#hide').click(function(){  //第一种写法
                $('p').hide();// 隐藏p
            });
        });

        $(document).ready(function(){  //第一种写法
            $('#show').click(function(){
                $('p').show();// 显示p
            });
        });

        
        $(function () {           //第二种写法(推荐)
            var hide = $('#hide');
            var show = $('#show');
            // 隐藏
            $(hide).click(function () {
                $('p').hide(1);//带有两个参数slow fast或者给定的毫秒时间1000ms
            });
            // 显示
            $(show).click(function () {
                $('p').show(1, 'swing', function () {//带参数linear和swing和函数
                    alert('成功显示出来！');
                });
            });
            // 3 显示或影藏
            $('.btn').click(function () {
                $("p").toggle();
            });
        });
    </script>
</head>
<body>
    <button class="btn">显示/隐藏</button>
    <button id="hide">隐藏div</button>
    <button id="show">显示div</button>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, quo.</p>
</body>
</html>